<template>
    <view class="page">
        <view class="top">
            <view class="top-content">
                <view class="top-content-top">
                    <view class="top-content-top-items">{{ dataForm.packageName ? dataForm.packageName : dataForm.name }}</view>
                    <view class="time">
						<u-icon name="info-circle-fill"  color="#DCDCDC" size="40"></u-icon> 
                        关于预充值卡
                    </view>
                </view>
                <view class="top-content-middle">
                    <view class="top-content-top-items">套餐有效期：</view>
                    <view class="time">{{dataForm.startTime}} 至 {{ dataForm.endTime }}</view>
                </view>
                <view class="top-content-middle">
                    <view class="top-content-top-items">套餐价格：</view>
                    <view class="time">{{ (dataForm.salePriceRmb ? dataForm.salePriceRmb : dataForm.salePrice / 100).toFixed(2) || 0 }}元</view>
                </view>
            </view>
        </view>
        <view class="preferential" @click="selectCoupon">
            <view class="roll">券</view>
            <view class="roll-up">活动余额</view>
            <view class="roll-proce">{{dataForm.price}}元</view>
        </view>
        <view class="section">
            <view class="page-service">
				<u-checkbox-group placement="row" size="40" iconPlacement="right" shape="circle" iconSize="30">
					<u-checkbox label="自动续订" :checked="result" class="label"  labelSize="36" labelColor="#28292D" @change="toggle"></u-checkbox>
				</u-checkbox-group>
            </view>
            <view class="page-payment">
                <view class="name">支付方式</view>
				<u-radio-group
					v-model="radio"
					:borderBottom="true"
					size="40"
					placement="column"
					iconPlacement="right"
				>
				<block v-for="(item,index) in payTypeList">
					<u-radio :customStyle="{marginBottom: '10px',paddingBottom:0}" v-if="item.type !== 'aliCollectConfig' && item.type !=='yeCollectConfig' && item.type !== 'jdCollectConfig'" label="微信支付" :name="item.type"  class="wx-icon" labelSize="28" iconSize="30"/>
					<u-radio :customStyle="{marginBottom:'10px',paddingBottom:0}" v-if="item.type === 'aliCollectConfig'" label="支付宝" name="aliCollectConfig" class='ali-icon' iconSize="30" labelSize="28"/>
					<u-radio :customStyle="{marginBottom:0,paddingBottom:0}"  v-if="item.type === 'yeCollectConfig'" label="余额支付" name="yeCollectConfig" class='yue-icon' iconSize="30" labelSize="28"/>
				</block>
				</u-radio-group>
            </view>
        </view>
        <view class="footer">
            <view class="agreement">
                <!-- <van-checkbox v-model="checked">我已阅读</van-checkbox><text @click="aaaaa">《自动续订服务协议》</text> -->
				<u-checkbox-group placement="row" size="40"  shape="circle"  iconSize="30" >
					<u-checkbox label=""  :checked="checked" @change="checkedChange"></u-checkbox>
				</u-checkbox-group>
				<text>我已阅读并同意
					<text class="u-bule" @click="show = true">《自动续订服务协议》</text>
				</text>
            </view>
            <view class="payment">
                <view class="payment-items">
                    <view class="">需支付：</view>
                    <view class="price">￥<text> {{ (dataForm.salePriceRmb ? dataForm.salePriceRmb : dataForm.salePrice / 100 ) - (dataForm.price*1) > 0 ? ((dataForm.salePriceRmb ? dataForm.salePriceRmb : dataForm.salePrice / 100 ) - (dataForm.price*1)).toFixed(2) : 0 }}</text></view>
                    <view class="price-small">{{ (dataForm.salePriceRmb ? dataForm.salePriceRmb : dataForm.salePrice / 100).toFixed(2)  || 0 }}</view>
                </view>
                <view class="payment-btn">
                    <u-button type="primary"  shape="circle" color="#397EF5" @click="sumbit">去支付</u-button>
                </view>
            </view>
        </view>
		<u-modal :show="show" @confirm="confirm" :show-cancel-button="true" @cancel="show = false" title="关于自动续费须知" content='当卡的套餐即将过期时，系统会自动用余额来购买次月套餐 避免卡因套餐过期停机。点击勾选后续费后 此业务生效。'></u-modal>
		<!-- <passWordDialog :uShow="uShow" :isSetPaw="isSetPaw" @hide="hide" @investOrder="investOrder"/> -->
		<u-modal :show="modalShow" @confirm="confirm1" ref="uModal" :asyncClose="true" showCancelButton @cancel="modalShow=false">
			当前卡余额不足，请点击 确定 前往充值余额后再来购买套餐。
		</u-modal>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				checked:false,
				result:[],
				show:false,
				dataForm:{},
				orderNo:'',
				timer:null,
				modalShow:false,
				isOpenAccount:0,
				isSetPaw:false,
				uShow:false,
				payTypeList:[],
				radio:'yeCollectConfig'
			}
		},
		onLoad(options) {
			this.dataForm = JSON.parse(decodeURIComponent(options.params))
		},
		mounted() {
			uni.$on('refreshPreviousPage', (data) => {
			  this.refreshPage(data.data);
			});
		},
		onShow() {
			if(uni.getStorageSync('orderNo')) {
				this.orderChange(uni.getStorageSync('orderNo'))
			}
		},
		created() {
			this.payTypeList = []
			var anzuo = uni.getSystemInfoSync().platform === 'android' ? '1' : '0'
			this.$api.payChanle({iccid: uni.getStorageSync('iccid') || '',anzuo}).then(res=>{
				for (let i = 0; i < res.data.length; i++) {
					this.payTypeList.push({type:res.data[i].typeKey,payType:res.data[i].payType});
				}
			})
			this.$api.account({iccid: uni.getStorageSync('iccid') || ''}).then(res=>{
				this.isSetPaw = false 
				this.isOpenAccount = res.data.isOpenAccount
			})
			this.selectIsAutoState()
		},
		methods:{
			//查询支付结果
			orderChange(orderNo){
				this.$api.orderState({orderNo}).then(res=>{
					if(res.code === '200'){
						uni.showModal({
							title:"支付通知",
							content:"您已完成支付！请稍后刷新页面查询到账",
							success(ress){
								uni.switchTab({
									url:"/pages/index/index"
								})
							}
						})
					}
				})
			},
			//页面跳转回来时带的参数
			refreshPage(data){
				this.dataForm = data
			},
			confirm() {
				this.show = false;
			},
			confirm1(){
				uni.navigateTo({
					url:'/pages/recharge/index',
				})
				this.modalShow=false
			},
			checkedChange(e){
				this.checked = e
			},
			toggle(e){
				console.log(e)
				const param = {
					iccid: uni.getStorageSync('iccid') || '',
					isAuto: !e ? 1 : 0
				}
				this.$api.updateState(param).then(res => {
					if (res.code === '200') {
						this.selectIsAutoState()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			selectCoupon(){
				uni.navigateTo({
					url:'/pages/coupon/index?params='+ encodeURIComponent(JSON.stringify(this.dataForm))
				})
			},
			selectIsAutoState(){
				this.$api.isAutoState({iccid: uni.getStorageSync('iccid') || ''}).then(res=>{
					if (res.code === '200') {
						this.result = res.data === 0 ? true : false
					}
				})
			},
			hide(){
				this.uShow = false
			},
			investOrder(data){
				var params = {
					payPass:data,
					isNextMonth:0,
					isAdmin:this.dataForm.isAdmin,
					soldPackageId:this.dataForm.id,
					iccid: uni.getStorageSync('iccid') || '',
					mobile: uni.getStorageSync('userPhone') || '',
					primaryId:this.dataForm.primaryId || '',
					secondaryId:this.dataForm.secondaryId || '',
				}
				this.$api.userUniorder(params).then(res=>{
					if(res.code === '200'){
						this.$api.sysUserPkg({orderNo:res.data.id,...params}).then(res=>{
							if(res.code === '200'){
								this.$utils.switchTab('/pages/index/index')
							}else{
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
						})
					}else{
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
					
				
			},
			sumbit(){
				var params = {
					iccid: uni.getStorageSync('iccid') || '',
					soldPackageId: this.dataForm.id,
					isAdmin: this.dataForm.isAdmin,
					secondaryId: this.dataForm.secondaryId || '',
					primaryId: this.dataForm.primaryId || '',
					isNextMonth:0,
					firstPkg:"1T",
					payType:null
				}
				if(!this.radio){
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					})
					return
				}
				if(this.radio === 'yeCollectConfig'){
					if( this.isOpenAccount === 0){
						this.modalShow =true
						return
					}
					params.payType = '10'
					this.$api.userUniorder(params).then(res=>{
						if(res.code === '200'){
							this.$utils.switchTab('/pages/index/index')
						}else{
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				}else{
					//其他的支付
					var k = this.payTypeList.find(item =>item.type === this.radio)
					params.payType = k.payType
					this.$api.pkgOrder(params).then(res=>{
						uni.setStorageSync('orderNo',res.data.orderNo)
						if(res.code === '200'){
							if(k.payType === 80){ //支付宝h5支付
								//#ifdef H5
									window.location.href=res.data.payInfo;
								//#endif
								//#ifdef APP-PLUS
									plus.runtime.openURL(res.data.payInfo)
								//#endif
							}else if(k.payType === 88){//支付宝app支付
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: res.data.payInfo, //支付宝订单数据
									success: function(res) {
										console.log('success:' + JSON.stringify(res));
									},
									fail: function(err) {
										console.log('fail:' + JSON.stringify(err));
									}
								});
							}else if(k.payType === 20){// 微信h5支付
								// #ifdef APP-PLUS
								const platform = uni.getSystemInfoSync().platform
								// 创建一个webview
								const webview = plus.webview.create('','http://app.szxxtx.com');
								// 通过webview打开链接，后面加referer表示该链接是从哪里打开的，请填写申请h5支付的域名，比如：http://www.baidu.com,需要已备案
								switch(platform){
								  case 'android':
									webview.loadURL(res.data.payInfo,{'Referer':'http://app.szxxtx.com'});
									break;
								  case 'ios':
									webview.loadURL(res.data.payInfo,{'Referer':'http://app.szxxtx.com://'});
									break;
								  default:
									break;
								}
								// #endif
								// #ifdef H5
								window.open(res.data.payInfo);
								// #endif
							}else if(k.payType === 22||k.payType === 23||k.payType === 24){ //微信小程序支付
								//TODO
								// this.pay.wxpay(1,res.data);
								//#ifdef APP-PLUS
								var data = res.data
								plus.share.getServices(childRes => {
									let sweixin = null;
									for (let i in childRes) {
										if (childRes[i].id == 'weixin') {
											sweixin = childRes[i];
										}
									}
									//唤醒微信小程序
									if (sweixin) {
										sweixin.launchMiniProgram({
											id: 'gh_1c60bd6e4f46', //小程序原始id
											type:0, //小程序版本  0-正式版； 1-测试版； 2-体验版。
											// path: '/pages/index/index?price=100&payType=22&orderNo=HFDKG202311010000067755' //小程序的页面,用传的参数在小程序接值判断跳转指定页面
											path: '/pages/index/index?payType='+data.payType+ '&orderNo='+data.orderNo //小程序的页面,用传的参数在小程序接值判断跳转指定页面
										},
										//目标小程序点击返回App后执行的回调,在此接收binderror="launchAppError"的参数
										res1 => {
											console.log(res1)
										},err => {
											console.log(err)
										});
									}
								});
								//#endif
							}else{ //扫码支付 
								var param = {
									orderNo:res.data.orderNo,
									payUrl:res.data.payUrl,
									payImg:res.data.payImg,
								}
								let base64 = new this.$base64()
								uni.navigateTo({
									url:'/pages/scanCodePayment/index?params='+base64.encode(JSON.stringify(param))
								})
							}
						}else{
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.page{
    // background: #F4F6FA;
    padding:0 26upx;
    background: linear-gradient(180deg, #3980F9 0%, rgba(244, 246, 250, 1) 240px);
    padding-bottom:216upx;   
    height:calc(100% - 216upx);
    position: relative;
    .top{
        height:360upx;
        padding-top: 40upx;
        .top-content{
            height: 252upx;
            width:calc(100% - 48upx);
            background:#fff;
            border-radius: 20upx;
            padding:40upx 24upx;
            margin:0 auto 20upx;
        }
        .top-content-top{
            padding-bottom:30upx;
            display: flex;
            border-bottom: 2upx solid #EDEDED;
            justify-content: space-between;
        }
        .top-content-top-items{
            font-size: 32upx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #28292D;
            line-height: 44upx;
        }
        .time{
            height: 40upx;
            font-size: 28upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #397EF5;
            line-height: 40upx;
			display: flex;
        }
        .top-content-middle{
            margin-top:40upx;
            display: flex;
            justify-content: space-between;
        }
    }
    .preferential{
        padding:30upx 70upx 30upx 22upx;
        height: 44upx;
        display: flex;
        width:calc(100% - 46px);
        border-radius: 20upx;
        align-items: center;
        margin:0 auto;   
        background:#fff url('./../../static/img/icon12.png') no-repeat 96% center;
        background-size:18upx 32upx;
        .roll{
            width:44upx;
            height: 100%;
            border-radius:8upx;
            background: #FF894A;
            color:#fff;
            text-align: center;
            line-height: 44upx;
        }
        .roll-up{
            font-size: 32upx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #28292D;
            padding-left:16upx;
        }
        .roll-proce{
            color: #397EF5;
            font-size: 28upx;
            width: calc(100% - 156upx);
            text-align: right;
        }
    }
    .section{
        width:100%;
        margin:24upx auto;
        .page-service{
            width:calc(100% - 44upx);
            padding:22upx;
            border-radius: 20upx;
            background:#E3EDFF;
        }
		.u-checkbox-group{
			display: block;
			::v-deep .label{
				uni-text{
					font-weight: 600;
				}
			}
		}
        .page-payment{
            border-radius: 20upx;
            background:#fff;
            margin-top:20upx;
            width:calc(100% - 44upx);
            padding:22upx;
            margin-bottom:76upx;
            .name{
                padding-bottom:36upx;
                font-size: 36upx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #28292D;
                line-height: 50upx;
            }
        }
        .wx-icon{
            background: url('./../../static/img/icon09.png') left center no-repeat;
            background-size:52upx 42upx;
            padding-left: 70upx;
            height: 40px;
			line-height: 40px;
        }
        .ali-icon{
            background: url('./../../static/img/icon08.png') left center no-repeat;
            background-size:52upx 52upx;
            padding-left:70upx;
			height: 40px;
			line-height: 40px;
        }
        .yue-icon{
            background: url('./../../static/img/icon11.png') left center no-repeat;
            background-size:52upx 52upx;
            padding-left:70upx;
			height: 40px;
			line-height: 40px;
        }
    }
	.u-bule{
		color:$uni-bule;
	}
    .footer{
        position: fixed;
        bottom: 0;
        background:#fff;
        width:100%;
        padding:38upx 0 12upx;
        left: 0;
        height:166upx;
        .agreement{
            padding-left: 26upx;
            color:#28292D;
            display: flex;
            align-items: center;
            // text{
            //     color:#397EF5;
            // }
        }
        .payment{
            display:flex;
            margin-top:38upx;
            align-items: center;
            justify-content: space-between;
            .payment-items{
                display:flex;
                padding-left:26upx;
                align-items: center;
                .price{
                    color: #397EF5;
                    font-size:28upx;
                    font-family: HarmonyOS_Sans_SC_Bold;
                    text{
                        font-size:48upx;
                    }
                }
                .price-small{
                    padding-left:12upx;
                    color:#63666D;
                    font-size:28upx;
                    text-decoration: line-through;
					margin-top: 20upx;
                }
            }
            .payment-btn{
                margin-right:24upx;
                .u-button{
                    width:312upx;
                }
            }
        }
    }
}
</style>